<template>
  <div class="container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item
        ><span style="color: #417ced">会员客户管理</span></el-breadcrumb-item
      >
      <el-breadcrumb-item>客户信息字段设定</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 查询客户列表 -->
    <!-- 分配用户列表 -->
    <div class="query">
      <div>客户信息字段设定</div>
      <div style="display: flex">
        <div style="display: flex">
          <el-input
            size="mini"
            placeholder="请输入应用名称"
            v-model="search"
            prefix-icon="el-icon-search"
            maxlength="50"
          >
          </el-input>
          <el-button
            @click="searchEvent"
            style="margin-left: -1px"
            type="primary"
            size="mini"
            >搜索</el-button
          >
          <el-button @click="setEvent" size="mini"
            >重置</el-button
          >
        </div>
        <el-button
          style="margin-left: 20px"
          type="primary"
          size="mini"
          @click="dialogVisible = true"
          >新增字段</el-button
        >
      </div>
    </div>
    <div class="table">
      <el-table
        stripe
        align="center"
        :data="tableData.list"
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column label="应用名称" min-width="100">
          <template slot-scope="scope">
            <!-- <template v-if="scope.row.edit">
              <el-input
                v-model="scope.row.applicationName"
                class="edit-input"
                size="small"
                maxlength="50"
              />
            </template> -->
            <span>{{ scope.row.applicationName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="客户信息字段名称" min-width="150">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-input
                v-model="scope.row.propertyName"
                class="edit-input"
                size="small"
                maxlength="50"
              />
            </template>
            <span v-else>{{ scope.row.propertyName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="字段编码" min-width="120">
          <template slot-scope="scope">
            <template v-if="scope.row.edit">
              <el-input
                v-model="scope.row.propertyCode"
                class="edit-input"
                size="small"
                maxlength="50"
              />
            </template>
            <span v-else>{{ scope.row.propertyCode }}</span>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" min-width="110">
          <template slot-scope="scope">
            {{ $moment(scope.row.createdTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="120" fixed="right">
          <template slot-scope="scope">
            <div class="option">
               <!-- v-if="" -->
              <span v-if="parArray.indexOf('fieldPrevent') != -1 && scope.row.edit" @click="update(scope.row)">保存</span>
              <span
                v-if="scope.row.edit && parArray.indexOf('fieldPrevent') != -1"
                @click="
                  scope.row.edit = false;
                  scope.row.applicationName = scope.row.applicationName1;
                  scope.row.propertyCode = scope.row.propertyCode1;
                  scope.row.propertyName = scope.row.propertyName1;
                "
                >取消</span
              >
              <span
                v-if="!scope.row.edit && parArray.indexOf('fieldPrevent') != -1"
                @click="scope.row.edit = !scope.row.edit"
                >编辑</span
              >
              <span v-if="parArray.indexOf('fieldDelect') != -1" @click="delectEvent(scope.row)">删除</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页start -->
    <div class="page" v-if="tableData.totalNum > 0">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="tableData.pageNo"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="tableData.totalPage"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.totalNum"
          prev-text="上一页"
          next-text="下一页"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 分页end -->
    <el-dialog
      title="新增客户信息字段"
      append-to-body
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form :model="addData" label-width="80px">
        <el-form-item label="应用名称">
          <el-select
            v-model="addData.applicationId"
            placeholder="请选择应用名称"
            size="small"
          >
            <el-option
              v-for="item in applicationNames.list"
              :key="item.id"
              :label="item.applicationName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字段名称">
          <el-input
            v-model="addData.fieldName"
            placeholder="请输入字段名称"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="字段编码">
          <el-input
            size="small"
            v-model="addData.fieldCode"
            placeholder="请输入字段编码"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="add" size="mini">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import levelAddr from "@/components/levelAddr";
export default {
  components: {
    levelAddr,
  },
  data() {
    return {
      search: "",
      dialogVisible: false,
      tableData: {},
      currentPage1: 1,
      pageSize: 10,
      applicationNames: [],
      addData: {
        applicationId: "",
        fieldName: "",
        fieldCode: "",
      },
      parArray:[],
    };
  },
  created() {
        // 权限设定判断
    let limits = JSON.parse(sessionStorage.getItem("limit"));
    const params = limits.buttonTreeDto.filter(
      (item) => item.menuCode === "fieldSettingCode"
    );
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code);
    });
    // 权限设定判断

    this.listAxios();
    this.getApplicationNames();
  },
  activated() {
    this.listAxios();
  },
  methods: {
    searchEvent() {
      this.currentPage1 = 1;
      this.pageSize = 10;
      this.listAxios();
    },
    // 重置
    setEvent(){
      this.currentPage1 = 1;
      this.pageSize = 10;
      this.search="";
      this.listAxios();
    },
    listAxios() {
      this.axios
        .post("member/v1/member/property/config/list", {
          request: {
            applicationName: this.search,
            pageNo: this.currentPage1,
            pageSize: this.pageSize,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            for (let i in res.data.list) {
              res.data.list[i].edit = false;
              res.data.list[i].applicationName1 =
                res.data.list[i].applicationName;
              res.data.list[i].propertyName1 = res.data.list[i].propertyName;
              res.data.list[i].propertyCode1 = res.data.list[i].propertyCode;
            }
            this.tableData = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    getApplicationNames() {
      this.axios
        .post("member/v1/member/application/list", {
          request: {
            applicationName: "",
            pageNo: 1,
            pageSize: 9999,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.applicationNames = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    add() {
      this.axios
        .post("member/v1/member/property/config/add", {
          request: {
            applicationId: this.addData.applicationId,
            propertyName: this.addData.fieldName,
            propertyCode: this.addData.fieldCode,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.listAxios();
            this.$message.success("添加成功");
            this.dialogVisible = false;
            this.addData = {
              applicationId: "",
              fieldName: "",
              fieldCode: "",
            };
          } else {
            this.$message.error(res.message);
          }
        });
    },
    update(e) {
      this.axios
        .post(
          "member/v1/member/property/config/update",
          {
            request: {
              applicationId: e.applicationId,
              id: e.id,
              propertyCode: e.propertyCode,
              propertyName: e.propertyName,
            },
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.$message.success("修改成功");
            e.edit = false;
            this.listAxios();
          } else {
            this.$message.error(res.message);
          }
        });
    },
    handleCurrentChange(val) {
      this.currentPage1 = val;
      this.listAxios();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.listAxios();
    },

    // 删除
    delectEvent: _.debounce(function (row) {
      this.$confirm("确定要删除该信息字段吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios
            .get("/member/v1/member/property/config/delete?id=" + row.id)
            .then((res) => {
              if (res.code == 0) {
                this.$message.success("删除成功");
                this.listAxios();
              } else {
                this.$message.error(res.message);
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    }, 300),
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  //   background: url(../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  //   background: url(../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}

/deep/.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 10px;
}

.table {
  margin-top: 10px;
  margin-bottom: 40px;
}

/deep/.vxe-cell--title {
  color: #333;
}

/deep/.distpicker-address-wrapper select {
  padding: 0rem 0.75rem;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
}

.query {
  border-radius: 5px 10px 0px 5px;
  background: #fff;
  padding: 10px;
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  .el-form-item {
    display: inline-block;
    margin-right: 20px;
  }
}

.header {
  display: flex;
  justify-content: space-between;
  span {
    font-size: 15px;
    // color: #2d7edf;
    padding-bottom: 10px;
  }
  p {
    font-size: 12px;
    color: #2d7edf;
  }
  p:hover {
    cursor: pointer;
  }
}

/deep/ .query .el-input__inner {
  width: 180px;
}

.selectDate {
  display: inline-block;
  margin-right: 20px;

  span {
    display: inline-block;
    font-size: 15px;
    margin-right: 15px;
    vertical-align: middle;
  }

  .picker {
    display: inline-block;
    vertical-align: middle;
  }

  /deep/.el-input__inner {
    width: 250px;
    height: 28px;
    line-height: 28px;
  }

  /deep/ .el-date-editor .el-range__icon {
    line-height: 23px;
  }

  /deep/ .el-date-editor .el-range-separator {
    line-height: 23px;
  }

  /deep/.el-date-editor .el-range__close-icon {
    line-height: 22px;
  }
}

.operation {
  float: left;
  margin-left: 20px;

  img {
    width: 25px;
    height: 25px;
  }
}
.operation:hover {
  cursor: pointer;
}
.table {
  margin: 0px;

  /deep/.el-table td,
  .el-table th {
    text-align: center;
  }

  /deep/ .el-table th > .cell {
    text-align: center;
    color: rgb(45, 125, 223);
    font-size: 15px;
  }

  /deep/.el-table__row:hover {
    color: rgb(45, 125, 223);
  }

  /deep/.el-button {
    padding: 0px;
    height: 30px;
    width: 80px;
  }
}

.page {
  // margin: 10px 0;
  text-align: right;
  width: 100%;
  background: #f5f5f5;
  padding-right: 20px;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 1000;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
.option {
  span {
    padding: 0 5px;
    color: #0066ff;
  }
  span:hover {
    cursor: pointer;
  }
}
</style>
